<template>
	<view style="position: relative;">
		<!-- 头部 -->
		<view class="user-wrap bg-gradual-green">
			<!-- <view class="setting" @click="jump" data-src="/pagesA/set/set">
				<image src="/static/user/setting.png" mode="widthFix"></image>
			</view> -->
			<!-- <view class="customer">
				<image src="/static/user/customer.png" mode="widthFix"></image>
			</view> -->
			<view class="info">
				<!-- <image class="avatar" mode="aspectFill" :src="avatar" v-if="avatar"></image> -->
				<!-- <view v-else>
					<button class="cu-btn bg-green shadow-blur round lg" @click="jump" data-src="/pages/login/login">点击登录</button>
				</view> -->
				<!-- <view class="nickname">{{ nickname }}</view> -->
				
			</view>
			<view class="cu-avatar round lg margin-xs bg-green" v-if="nickname">
				<text class="avatar-text">{{nickname}}</text>
			</view>
		</view>
		
		<view class="cover-container">
			<!-- 客户服务 -->
			<!-- <view class="com-item">
				<view class="com-wrap">
					<view class="cell" hover-class="btn-hover" v-for="(item, index) in customerList" :key="index"  @click="jump" :data-src="item.src">
						<view class="cell-left" >
							<image class="cell-icon" :src="item.icon" mode="widthFix"></image>
							<view class="cell-text">{{ item.title }}</view>
						</view>
						<view class="iconfont">
							<image src="/static/user/right.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view> -->
			
			<!-- 用户功能 -->
			<!-- <view class="com-item">
				<view class="com-wrap">
					<view class="cell" hover-class="btn-hover" v-for="(item, index) in userList" :key="index"  @click="jump" :data-src="item.src">
						<view class="cell-left" >
							<image class="cell-icon" :src="item.icon" mode="widthFix"></image>
							<view class="cell-text">{{ item.title }}</view>
						</view>
						<view class="iconfont">
							<image src="/static/user/right.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view> -->
			
			<!-- 用户服务 -->
			<!-- <view class="com-item">
				<view class="com-wrap">
					<view class="cell" v-for="(item, index) in serverList" :key="index" @click="jump" :data-src="item.src">
						<view class="cell-left">
							<image class="cell-icon" :src="item.icon" mode="widthFix"></image>
							<view class="cell-text">{{ item.title }}</view>
						</view>
						<view class="iconfont">
							<image src="/static/user/right.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view> -->
			<view style="margin-top: 15upx;width: 100%;background-color: #fff;">
				<view style="line-height: 110upx;font-size: 34upx;margin-left: 30upx;height: 60upx;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;font-weight: 550;">
					我的
				</view>
				<view class="u-grid" style="padding: 0 20upx 20upx;">
					<view class="u-grid-item" hover-class="btn-hover" v-for="(item, index) in customerList" :key="index" @click="jump" :data-src="item.src">
						<view class="u-grid-item-box">
							<image :src="item.icon" mode="widthFix" style=""></image>
						</view>
						<view style="font-size: 22upx;">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 15upx;width: 100%;background-color: #fff;">
				<view style="line-height: 110upx;font-size: 34upx;margin-left: 30upx;height: 60upx;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;font-weight: 550;">
					其他
				</view>
				<view class="u-grid" style="padding: 0 20upx 20upx;">
					<view class="u-grid-item" hover-class="btn-hover" v-for="(item, index) in gridList" :key="index" @click="jump" :data-src="item.src">
						<view class="u-grid-item-box">
							<image :src="item.icon" mode="widthFix" style=""></image>
						</view>
						<view style="font-size: 22upx;">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			
			<!-- 宫格 -->
			
			
			<!-- <view class="sign-out">
				<button class="sign-out-btn" hover-class="btn-hover" @click="logout">退出登录</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: '',
				avatar: '',
				province: '',
				city: '',
				customerList: [
					{title: '工作数据', icon: '/static/ic_body_test_2.png', src: '/pagesA/Working_data/Working_data'},
					{title: '课程数据', icon: '/static/ic_training_program_2.png', src: '/pagesA/Course_data/Course_data'},
					{title: '课时费', icon: '/static/ic_patrol_service_2.png', src: '/pagesA/teachinghour_subsidy/teachinghour_subsidy'},
					{title: '客户生日', icon: '/static/user/icon-about.png', src: '/pagesA/Customers_birthday/Customers_birthday'},
				],
				userList: [
					// {title: '会员资料', icon: '/static/user/icon-foot.png', src: '/pagesA/info/info'},
					// {title: '手机绑定', icon: '/static/user/icon-foot.png', src: '/pagesA/bind/bind'},
					// {title: '修改密码', icon: '/static/user/icon-foot.png', src: '/pagesA/change_password/change_password'},
					// {title: '会员充值', icon: '/static/user/icon-foot.png', src: '/pagesA/recharge/recharge'},
					// {title: '申请提现', icon: '/static/user/icon-foot.png', src: '/pagesA/withdraw/withdraw'},
				],
				serverList: [
					// {title: '帮助中心', icon: '/static/user/icon-help.png', src: 'Not-yet-open'},
					// {title: '版本', icon: '/static/user/icon-about.png', src: 'Not-yet-open'}
				],
				gridList: [
					{title: '个性设置', icon: '/static/user/setting.png', src: '/pagesA/set/set'},
					{title: '客户案例', icon: '/static/ic_training_program_2.png', src: '/pagesA/customer_case/customer_case'},
					// {title: '训练模板', icon: '/static/ic_attitude_assessment_2.png', src: 'Not-yet-open'},
					{title: '动作库', icon: '/static/ic_index_month_class.png', src: '/pagesA/trial_class/movement_list?qx=user'},
				],
				res:{}, // 个人中心数据
			};
		},
		// onPullDownRefresh() {uni.stopPullDownRefresh();},
		mounted(){
			uni.getStorage({
				key: 'avatar',
				success: (res) => {
					o.avatar = res.data
					console.log(o.avatar)
			 },
			 fail: () => {
			 }
			});
			uni.getStorage({
				key: 'userName',
				success: (res) => {
					o.nickname = res.data
					console.log(o.nickname)
			 },
			 fail: () => {
			 }
			});
			var o = this
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					o.openid = res.data
					o.setAjax()
			 },
			 fail: () => {
				 uni.hideLoading()
				 uni.navigateTo({
				 	url:'/pagesA/login/login'
				 })
			 }
			});
		},
		methods:{
			setAjax(){
						uni.hideLoading()
				// uni.request({
				// 	url: 'https://wechatdemo.mygodmall.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
				// 	method: 'POST',
				// 	data: {'openid':this.openid},
				// 	header:{'Content-Type':'application/x-www-form-urlencoded'},
				// 	success: res => {
				// 		uni.hideLoading()
				// 		this.res = res.data
				// 		this.avatar = res.data.avatar
				// 		console.log(this.avatar)
				// 	},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
				
			},
			wxGetUserInfo:function(res) {
				var o = this
				let info = res.detail.userInfo
				this.nickname = info.nickName
				this.avatar = info.avatarUrl
				this.province = info.province
				this.city = info.city
				// uni.setStorage({
				// 	key: 'avatar',
				// 	data: info.avatarUrl
				// })
				let ress = res
				uni.login({
					provider: "weixin",
					success:function(loginRes) {
						uni.request({ // 获取后台给用户安排的个人信息
							url: 'https://wechatdemo.mygodmall.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.programslogin&app=1',
							method: 'POST',
							data: {
								code: loginRes.code,
								encryptedData: ress.detail.encryptedData,
								iv: ress.detail.iv,
								rawData: ress.detail.rawData,
								signature: ress.detail.signature
							},
							header:{
								'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
							},
							success: (detail) => { // 后台存取数据
								uni.request({
									url: 'https://wechatdemo.mygodmall.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.small_app_login&app=1',
									method: 'POST',
									data: {
										openid: detail.data.openid,
										nickname: o.nickname,
										avatar: o.avatar,
										province: o.province,
										city: o.city
									},
									header:{'Content-Type':'application/x-www-form-urlencoded'},
									success: details => {
										uni.setStorage({
											key: 'openid',
											data: details.data.openid
										})
									},
									fail: () => {},
									complete: () => {}
								});
								
								
							}
						});
						
					}
				})
			},
			jump(e){
				if ( e.currentTarget.dataset.src == 'Not-yet-open') {
					uni.showModal({
						title:'提示',
						content:'功能即将开放',
						showCancel: false,
						confirmColor:"#DD524D",
							success() {
								return
							}
					})
				} else {
					uni.navigateTo({
						url: e.currentTarget.dataset.src
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {background-color: #f5f5f5;}
	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vw;
		padding: 30upx;
		z-index: 9;
		border-radius: 0 0 20% 20%;
		// background: $uni-color-success;
		// background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
		background-size: cover;
		.setting {
			color: #fff;
			position: absolute;
			top: 60upx;
			left: 60upx;
			font-size: 50upx;
			image {
				width: 60upx;
				height: 60upx;
			}
		}
		.customer {
			color: #fff;
			position: absolute;
			top: 60upx;
			left: 135upx;
			font-size: 50upx;
			image {
				width: 60upx;
				height: 60upx;
			}
		}
		.info {
			position: absolute;
			text-align: center;
			.avatar {
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
			}
			.nickname {
				color: #fff;
				font-size: 28upx;
			}
		}
	}
	
	// 右侧的固定栏
	.msg-box-setting {
		position:fixed;
		right: 10upx;
		top: 80upx;
		width: 66upx;
		height: 66upx;
		z-index: 9999999;
		.msg {
			width: 66upx;
		}
	}
	.msg-box-customer {
		position:fixed;
		right: 100upx;
		top: 80upx;
		width: 66upx;
		height: 66upx;
		z-index: 9999999;
		.msg {
			width: 66upx;
		}
	}
	.btn-hover {
		background: #f1f1f1 !important;
	}
	
	// 数据列表栏
	.tj-sction{
		padding-top: 320upx;
		display:flex;
		justify-content: space-around;
		align-content: center;
		border-radius: 10upx;
		.tj-item{
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 140upx;
			font-size: 24upx;
			color: #F1F1F1;
		}
		.num{
			font-size: 38upx;
			color: #fff;
			margin-bottom: 8upx;
			font-weight: 555;
		}
	}
	// 版心
	.cover-container{
		// padding: 0 20upx;
		// height: 4000upx; // 测试顶部栏滚动动画用
		overflow: hidden;
		background: #f5f5f5;
		padding-bottom: 20upx;
	}
	// 包含栏
	.box-section{
		margin: 20upx 0 0;
		border-radius:10upx;
		background-color: #fff;
		// 头部
		.sec-header{
			display:flex;
			align-items: center;
			font-size: 34upx;
			font-weight: 555;
			color: #333333;
			height: 80upx;
			line-height: 80upx;
			margin: 0 30upx;
			border-bottom: 1upx solid #F1F1F1;
		}
	}
	// 列表
	.status-list {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		padding-top: 30upx;
		padding-bottom: 30upx;
		.status-item {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.item-icon {
				line-height: 1;
				width: 56upx;
				height: 56upx;
				color: #bbb;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.item-text {
				height: 40upx;
				line-height: 40upx;
				font-size: 28upx;
				color: #666;
				margin-top: 5upx;
			}
			.item-badge {
				position: absolute;
				right: 40upx;
				top: -10upx;
				background-color: #05052B;
			}
		}
	}
	// 用户功能 用户服务
	.com-item {
		// padding-left: 20upx;
		// padding-right: 20upx;
		margin-top: 20upx;
		.com-wrap {
			border-radius: 25upx;
			overflow: hidden;
		}
	}
	.cell {
		height: 80upx;
		padding-left: 20upx;
		padding-right: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f8f8f8;
		&:active {
			background: #f2f2f2;
		}
		&:last-child {
			border-bottom: none !important;
		}
		.cell-left {
			display: flex;
			align-items: center;
			.cell-icon {
				width: 50upx;
				height: 50upx;
			}
			.cell-text {
				color: #666;
				font-size: 28upx;
				margin-left: 20upx;
			}
		}
		.iconfont {
			width: 40upx;
			height: 40upx;
			image {
				width: 26upx;
				height: 26upx;
				margin-top: 14upx;
			}
		}
	}
	// 浏览历史
	.h-list{
		width: 650upx;
		white-space: nowrap;
		padding: 30upx 30upx 0;
		.h-box {
			display:inline-block;
			text-align: center;
			font-size: 24upx;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				border-radius: 10upx;
				margin-right: 10upx;
			}
		}
	}
	// 宫格
	.u-grid {
		width: 100%;
		display:flex;
		flex-wrap: wrap;
		background: #fff;
		margin: 20upx 0;
		border-radius: 10upx; // 设置九宫格的radius代码
		// 这里的屏宽710upx
		.u-grid-item {
			width: calc(100% / 5); // 设置列数
			box-sizing: border-box;
			text-align: center;
			font-size: 24upx;
			.u-grid-item-box {
				width: 100%;
				image {
					width: 90upx;
					margin-top: 20upx;
				}
			}
		}
	}
	
	
	// 退出登录
	.sign-out {
		margin: 50upx 0;
		.sign-out-btn {
			background-color: $uni-color-success;
			height: 100upx;
			line-height: 100upx;
			color: #fff;
			width: 90%;
			margin-left: 5%;
			border-radius: 20upx;
		}
	}


</style>
